<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摄影师详情</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="assets/common.css">
    <style>
        .photographer-cover {
            height: 220px;
            background: linear-gradient(135deg, #fd79a8 0%, #ff94b4 100%);
            position: relative;
            overflow: hidden;
        }
        .photographer-cover::after {
            content: "";
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            right: -50px;
            top: -100px;
        }
        .photographer-avatar {
            width: 90px;
            height: 90px;
            border: 3px solid white;
            border-radius: 50%;
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 40px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .tab-menu {
            display: flex;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 16px;
        }
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 15px;
            color: #666;
        }
        .tab-item.active {
            color: #fd79a8;
            border-bottom: 2px solid #fd79a8;
            font-weight: 500;
        }
        .photo-sample {
            width: 100%;
            height: 120px;
            background-color: #eee;
            border-radius: 8px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="wechat-container">
        <div class="photographer-cover">
            <div class="wechat-back">
                <i class="fas fa-chevron-left"></i>
            </div>
            <div class="photographer-avatar">
                <i class="fas fa-user"></i>
            </div>
        </div>
        
        <div class="wechat-content" style="padding-top: 50px;">
            <!-- Photographer Info -->
            <div class="text-center mb-4">
                <h1 class="text-lg font-bold">林夕摄影</h1>
                <div class="rating mt-1">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                    <span class="text-gray">4.5 (42条评价)</span>
                </div>
                <div class="flex justify-center mt-2">
                    <div class="wechat-tag">二次元</div>
                    <div class="wechat-tag">人像</div>
                </div>
            </div>
            
            <!-- Status Info -->
            <div class="wechat-card flex justify-between items-center">
                <div>
                    <div class="text-sm">今日接单</div>
                    <div class="text-lg font-bold text-pink">12</div>
                </div>
                <div class="wechat-divider h-8 w-px mx-4"></div>
                <div>
                    <div class="text-sm">等待中</div>
                    <div class="text-lg font-bold status-waiting">4</div>
                </div>
                <div class="wechat-divider h-8 w-px mx-4"></div>
                <div>
                    <div class="text-sm">拍摄中</div>
                    <div class="text-lg font-bold status-ready">1</div>
                </div>
                <div class="wechat-divider h-8 w-px mx-4"></div>
                <div>
                    <div class="text-sm">已完成</div>
                    <div class="text-lg font-bold status-completed">7</div>
                </div>
            </div>
            
            <!-- Tab Menu -->
            <div class="tab-menu">
                <div class="tab-item active">介绍</div>
                <div class="tab-item">作品</div>
                <div class="tab-item">评价</div>
                <div class="tab-item">套餐</div>
            </div>
            
            <!-- Introduction Tab Content -->
            <div class="wechat-card">
                <h3 class="font-bold mb-2">摄影师介绍</h3>
                <p class="text-sm text-gray">
                    林夕摄影，专注二次元/COSER写真摄影，5年漫展拍摄经验。擅长在漫展现场捕捉角色的精髓，塑造完美画面。为每一位COSER提供专业的摄影服务，让角色形象更加生动。
                </p>
                
                <div class="wechat-divider"></div>
                
                <h3 class="font-bold mb-2">服务特色</h3>
                <ul class="text-sm text-gray">
                    <li class="mb-1">• 现场快速retouching，当场出片</li>
                    <li class="mb-1">• 拍摄期间提供道具和补光设备</li>
                    <li class="mb-1">• 后期精修，突出角色特点</li>
                    <li class="mb-1">• 提供电子版和冲印服务</li>
                </ul>
                
                <div class="wechat-divider"></div>
                
                <h3 class="font-bold mb-2">拍摄场地</h3>
                <p class="text-sm text-gray">
                    星漫动漫展C区3号展位旁<br>
                    营业时间：9:00-18:00
                </p>
            </div>
            
            <!-- Work Samples -->
            <div class="wechat-card">
                <h3 class="font-bold mb-3">作品展示</h3>
                <div class="photo-grid">
                    <div class="photo-sample"><i class="fas fa-image"></i></div>
                    <div class="photo-sample"><i class="fas fa-image"></i></div>
                    <div class="photo-sample"><i class="fas fa-image"></i></div>
                    <div class="photo-sample"><i class="fas fa-image"></i></div>
                    <div class="photo-sample"><i class="fas fa-image"></i></div>
                    <div class="photo-sample"><i class="fas fa-image"></i></div>
                </div>
                <div class="text-center mt-2">
                    <a href="#" class="text-sm text-pink">查看更多作品 <i class="fas fa-angle-right"></i></a>
                </div>
            </div>
            
            <!-- Booking Button -->
            <button class="wechat-btn mt-8">
                立即预约
            </button>
        </div>
    </div>
</body>
</html> 